<template>
  <page-header-wrapper v-loading="loading">
    <page-tab-list></page-tab-list>

    <a-card :bordered="false">
      <a-form-model ref="ruleForm" :rules="rules" :model="form" :labelCol="{ span: 4 }" :wrapperCol="{ span: 17 }">
        <a-form-model-item label="当面付一级分销佣金比例" prop="face_first_profit">
          <a-input-number :min="0" :precision="2" :step="0.01" v-model="form.face_first_profit" />
          <em> %</em>
        </a-form-model-item>
        <a-form-model-item label="当面付二级分销佣金比例" prop="face_second_profit">
          <a-input-number :min="0" :precision="2" :step="0.01" v-model="form.face_second_profit" />
          <em> %</em>
        </a-form-model-item>
        <a-form-model-item label="当面付三级分销佣金比例" prop="face_third_profit">
          <a-input-number :min="0" :precision="2" :step="0.01" v-model="form.face_third_profit" />
          <em> %</em>
        </a-form-model-item>
      </a-form-model>
      <a-divider />

      <div class="tc">
        <a-button :loading="btnLoading" type="primary" @click="submitForm"> 保存 </a-button>
      </div>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { setSettingFacePayprofit, getSettingFacePayprofit } from '@/api/plugin/scanCodePay'
export default {
  data() {
    return {
      loading: false,
      btnLoading: false,
      form: {
        face_first_profit: '',
        face_second_profit: '',
        face_third_profit: '',
      },
      rules: {
        face_first_profit: [{ required: true, message: '请输入当面付一级分销佣金比例', trigger: 'blur' }],
        face_second_profit: [{ required: true, message: '请输入当面付二级分销佣金比例', trigger: 'blur' }],
        face_third_profit: [{ required: true, message: '请输入当面付三级分销佣金比例', trigger: 'blur' }],
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 18 },
      },
    }
  },

  created() {
    this.getData()
  },

  methods: {
    getData() {
      this.loading = true
      getSettingFacePayprofit()
        .then((res) => {
          if (res.code === 0) {
            this.$nextTick(() => {
              this.form = res.data
            })
          }
        })
        .catch((error) => {
          console.log(error)
        })
        .then(() => {
          this.loading = false
        })
    },

    submitForm() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.btnLoading = true
          setSettingFacePayprofit(this.form)
            .then((res) => {
              if (res.code == 0) {
                this.$message.success('保存成功！')
              } else {
                this.$message.warning(res.msg ? res.msg : '保存失败！')
              }
            })
            .catch((error) => {
              console.log(error)
            })
            .then(() => {
              this.btnLoading = false
            })
        }
      })
    },
  },
}
</script>

<style lang="less" scoped>
h4 {
  font-size: 16px;
  font-weight: bold;
}

.tc {
  text-align: center;
}

.ts {
  color: #ff0000;
}
</style>
